/**
 * 手续费明细
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>手续费明细</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock">
      <div class="serachTop">
         <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
          <el-form-item >
            <el-input
              size="small"
              v-model="formInline.cardNo"
              placeholder="输入卡号后四位"
              type="number"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入使用者ID"
                type="number"
                v-if='hasPermission'
                clearable
              ></el-input>
          </el-form-item> 
          <el-form-item>
            <el-date-picker
              v-model="value1"
              size="small"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="createdData"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select
              size="small"
              v-model="formInline.type"
              placeholder="请选择操作类型"
              clearable
            >
              <el-option
                v-for="type in typeData"
                :label="type.key"
                :value="type.value"
                :key="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >
              搜索
            </el-button>
          </el-form-item>
        </el-form>
        <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()" v-if="hasPermissionMethod(['common','user11'])">
            导出
          </el-button>
      </div> 
      <!--列表-->
      <div class="ra_box"> 
        <el-table
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          style="width: 100%"
          v-if="listData"
        >
        <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>

          <!-- <el-table-column prop="requestId" label="流水号" show-overflow-tooltip>
        </el-table-column> -->
          <!-- <el-table-column prop="cardId" label="卡ID" show-overflow-tooltip>
        </el-table-column> -->
          <el-table-column prop="cardNo" label="卡号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="transactionAmount"
            label="交易金额"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ b(scope.row.transactionAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="扣款金额" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>
                {{ b(scope.row.amount) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="transactionAmountRate"
            label="交易费率"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column prop="balance" label="钱包余额" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ b(scope.row.balance) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="交易类型"
            show-overflow-tooltip
            
          >
            <template slot-scope="scope">
              {{ typeDataJson[scope.row.type] || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="createAt" label="操作时间" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ timestampToTime(scope.row.createAt) }}
            </template>
          </el-table-column>
          <!-- v-if="hasPermissionMethod(['user10','user11'])" -->
          <el-table-column align="center" label="操作" width="300" >
            <template slot-scope="scope">
              <el-button size="mini" plain :key="scope.$index" @click="handleEdit(scope.$index, scope.row)" >
                查看详情
              </el-button>
              <!-- <el-button size="mini" plain @click="handleEdit2(scope.$index, scope.row)" style="color: #2e3094;border-color: #2e3094 !important;">
                查看分成信息
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    <!-- 编辑界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="查看详情"
      :visible.sync="editFormVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="流水号" prop="requestId">
          {{ editForm.requestId }}
        </el-form-item>
        <!-- <el-form-item label="卡ID" prop="cardId">
          {{ editForm.cardId }}
        </el-form-item> -->
        <el-form-item label="卡号" prop="cardNo">
          {{ editForm.cardNo }}
        </el-form-item>
        <el-form-item label="交易金额" prop="transactionAmount">
          {{ b(editForm.transactionAmount) }}
        </el-form-item>
        <el-form-item label="扣款金额" prop="amount">
          {{ b(editForm.amount) }}
        </el-form-item>
        <el-form-item label="交易费率" prop="transactionAmountRate">
          {{ editForm.transactionAmountRate }}
        </el-form-item>
        <el-form-item label="钱包余额" prop="balance">
          {{ b(editForm.balance) }}
        </el-form-item>
        <el-form-item label="操作类型" prop="type" v-if="editForm.type">
          {{ typeDataJson[editForm.type] || '-' }}
        </el-form-item>
        <el-form-item label="操作时间" prop="createAt"> 
          {{ timestampToTime(editForm.createAt) }}
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          {{ editForm.remark }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>

        <!-- 分成信息 -->
   <el-dialog
      :close-on-click-modal="false"
      title="查看分成信息"
      :visible.sync="editFormVisible2"
      width="30%"
      @close="closeDialog"
    > 
      <el-form label-width="120px" :model="dataInfo" ref="editForm">
        <el-form-item label="用户ID:" prop="userId">
          {{ editForm.userId || '-' }}
        </el-form-item>
        <el-form-item prop="agentId" label="代理ID:">
          {{ editForm.agentId || '-'  }}
        </el-form-item> 
        <el-form-item prop="type" label="类型:">
           {{ editForm.type==0?'手续费':'充值费' }}
        </el-form-item>
        <el-form-item prop="execRate"   label="执行费率:">
          {{ editForm.execRate  || '-' }}
        </el-form-item>
        <el-form-item prop="costRate" label="成本费率:">
          {{ editForm.costRate || '-'  }}
        </el-form-item>
        <el-form-item prop="computeRate" label="计算费率:">
          {{ editForm.computeRate || '-'  }}
        </el-form-item>
        <el-form-item prop="amount" label="计算金额:">
          {{ editForm.amount || '-'  }}
        </el-form-item>
        <el-form-item prop="profit" label="待分金额:">
          {{ editForm.profit || '-'  }}
        </el-form-item>
        <el-form-item prop="feeId" label="手续费ID:">
          {{ editForm.feeId || '-'  }}
        </el-form-item> 
        <el-form-item label="备注" prop="remark">
          {{ editForm.remark }}
        </el-form-item>

      </el-form>
      <!-- 分成信息 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  timestampSubTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  service,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      addFormVisible: false,
      editFormVisible2:false,
      editFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      typeData: [
        { key: "请选择交易类型", value: "" },
        { key: "开卡", value: 1 },
        { key: "充卡", value: 2 },
        { key: "交易退款", value: 3 },
        { key: "交易(常规卡)", value: 4 },
        // { key: "交易(共享卡)", value: 5 }, 
        { key: "服务费", value: 6 },
        // { key: "后台扣款", value: 9 },
      ],
      typeDataJson: {
        1: "开卡",
        2: "充卡",
        3: "交易退款",
        4: "交易(常规卡)",
        // 5: "交易(共享卡)", 
        6: "服务费",
        // 9: "后台扣款",
      },
      editForm: {},
      value1: "",
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardId: "",
        cardNo: "",
        type: "",
        createdAtStart: "",
        createdAtEnd: "",
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false

    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])  
    } 

  },
  methods: {
    hasPermissionMethod(data) {
      // 调用全局公共方法
      this.userInfo = JSON.parse(this.$store.state.user);
      return this.$hasPermission(this.userInfo,data) 
    },
    exportEx() {
      let url = getUrl(this.formInline);
      service
        .post("/api/photon/exportTradeFeeList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    createdData() {
      if (this.value1) {
        this.formInline.createdAtStart = timestampSubTime(
          this.value1[0]
        );
        this.formInline.createdAtEnd = timestampSubTime(
          this.value1[1]
        );
      } else {
        this.formInline.createdAtStart = "";
        this.formInline.createdAtEnd = "";
      }
    },
    getdata(parameter) {
      let url = getUrl({
        ...parameter,
        channel:0
      });  
      service
        .get("/api/photon/tradeFeeList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = row;
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
      this.editFormVisible2 = false;

    },
    handleEdit2(index, row){
      this.editFormVisible2 = true;
      this.editForm = row;  
      service
        .get("/api/photon/tradeFeeAgentInfo/" + row.id, {})
        .then((res) => {  
          if (res.code == 0) {
            this.dataInfo = { 
              ...res.data
            }
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 